<template>
  <div class="data-mapping-chose display-flex w-full h-full" style="overflow: hidden">
    <div class="h-full flex-1 item-list-box display-flex-column" style="overflow: auto">
      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">模板名称:</div>
        <div class="item-list-content">
          <a-select
            show-search
            v-model="selectTemplate"
            class="selector-item"
            :filter-option="filterTemplateOption"
            @change="(key) => handlerTemplateChange(key)"
            style="width: 500px">
            <a-select-option v-for="item in templateList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="item-list display-flex" style="justify-content: flex-start;align-items: flex-start">
        <div class="item-list-name m-r-md">JSON信息:</div>
        <div class="item-list-content">
          <a-textarea
            v-model="templateJson"
            style="width: 500px"
            :auto-size="{ minRows: 6, maxRows: 10 }"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'DataMappingChose',
  props: {
    templateList: {
      type: Array,
      default: () => {
        return []
      }
    },
    sourceTemplateId: {
      type: Number,
      default: () => {
        return 0
      }
    },
    sourceTemplateJson: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      templateJson: '',
      selectTemplate: undefined,
      selectTemplateObj: {}
    }
  },
  mounted () {
    if (this.sourceTemplateId) {
      this.selectTemplate = this.sourceTemplateId
      this.handlerTemplateChange(this.sourceTemplateId, this.sourceTemplateJson)
    }
  },
  methods: {
    handlerTemplateChange (key, content) {
      const find = this._.find(this.templateList, item => item.id === key)
      this.selectTemplateObj = find
      this.templateJson = content || find.content
    },
    filterTemplateOption (input, option) {
      const find = this._.find(this.templateList, item => item.id === option.key)
      return find.name.indexOf(input) >= 0
    }
  }
}
</script>

<style scoped lang="less">
.data-mapping-chose {
  padding: 10px;

  .item-list {
    margin-bottom: 10px;
  }
}
</style>
